<div class="layui-fluid" lay-title="操作记录">
  <div class="layui-row layui-col-space15">
    <div class="layui-card">
      <div class="layui-card-header">
        <i class="layui-icon layui-icon-read"></i>&nbsp;操作记录
      </div>
      <div class="layui-card-body">
        <table
          id="meter_exception_upload_table"
          lay-filter="meter_exception_upload_table"
        ></table>
      </div>
    </div>
  </div>
</div>

<!-- 工具栏 -->
<script type="text/html" id="meter_exception_upload_table_toolbar">
  <div style="display:flex;">
    <div style="font-size:25px;">
        <i class="layui-icon layui-icon-search" ></i>
    </div>
    <div class="layui-input-inline" style="margin-left:20px;width:200px;height:20px">
      <input
        type="text"
        placeholder="操作人姓名"
        class="layui-input"
        id="history_query_user_name"
      />
    </div>
    <div class="layui-input-block" style="margin-left:5px;height:20px">
      <select id="keywordCombineTypeFilter" lay-verify="required">
        <option value="0">满足部分关键词</option>
        <option value="1">满足全部关键词</option>
      </select>
    </div>
    <div class="layui-input-block" style="margin-left:5px;height:20px;width:250px">
      <input
        type="text"
        lay-verify="required"
        placeholder="操作名关键字 用空格分隔"
        class="layui-input"
        id="history_query_key_word"
      />
    </div>
    <div class="layui-input-block" style="margin-left:5px;height:20px">
        <div class="layui-input-inline">
          <input type="text" class="layui-input" autocomplete="off" id="history_querytime_filter" placeholder="时间范围过滤">
        </div>
    </div>

    <button class="layui-btn" style="margin-left:20px;" onclick="reloadHistoryQueryTable()">
      <i class="layui-icon layui-icon-search"></i> 搜索
    </button>
  </div>
</script>

<!-- 操作记录详情 -->
<div id="log_detain_window" style="display: none;">
  <div
    class="layui-tab layui-tab-brief"
    lay-filter="docDemoTabBrief"
    style="padding:5px"
  >
    <ul class="layui-tab-title">
      <li class="layui-this">
        <i class="layui-icon layui-icon-warning-circle">&nbsp;总览</i>
      </li>
      <li>
        <i class="layui-icon layui-icon-upload"> &nbsp;请求数据</i>
      </li>
      <li><i class="layui-icon layui-icon-download"> &nbsp;响应数据</i></li>
      <li>
        <i class="layui-icon layui-icon-file-exception"> &nbsp;异常数据</i>
      </li>
    </ul>
    <div class="layui-tab-content">
      <!-- 总览 -->
      <div class="layui-tab-item layui-show">
        <table class="layui-table" style="text-align: center;">
          <colgroup>
            <col width="150" />
            <col width="280" />
            <col width="150" />
          </colgroup>
          <tbody>
            <tr>
              <td style="background-color: RGB(243,243,243);">日志ID</td>
              <td id="id">N/A</td>
              <td style="background-color: RGB(243,243,243);">操作名称</td>
              <td id="method">N/A</td>
            </tr>
            <tr>
              <td style="background-color: RGB(243,243,243);">操作人ID</td>
              <td id="userId">N/A</td>
              <td style="background-color: RGB(243,243,243);">操作人</td>
              <td id="userName">N/A</td>
            </tr>
            <tr>
              <td style="background-color: RGB(243,243,243);">IP</td>
              <td id="ip">N/A</td>
              <td style="background-color: RGB(243,243,243);">URI</td>
              <td id="url">N/A</td>
            </tr>
            <tr>
              <td style="background-color: RGB(243,243,243);">浏览器信息</td>
              <td id="browser">N/A</td>
              <td style="background-color: RGB(243,243,243);">操作系统信息</td>
              <td id="osInfo">N/A</td>
            </tr>
            <tr>
              <td style="background-color: RGB(243,243,243);">成功标志</td>
              <td id="successFlag">N/A</td>
              <td style="background-color: RGB(243,243,243);">耗时</td>
              <td id="timeCast">N/A</td>
            </tr>
            <tr>
              <td style="background-color: RGB(243,243,243);">请求时间</td>
              <td id="requestTime">N/A</td>
              <td style="background-color: RGB(243,243,243);">响应时间</td>
              <td id="responseTime">N/A</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 请求 -->
      <div class="layui-tab-item">
        <table class="layui-table" style="text-align: center;">
          <colgroup>
            <col width="150" />
          </colgroup>
          <tbody>
            <tr>
              <td style="background-color: RGB(243,243,243);">REQUEST</td>
              <td>
                <textarea
                  style="width: 100%;"
                  rows="20"
                  id="requestArgs"
                  disabled
                ></textarea>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 响应 -->
      <div class="layui-tab-item">
        <textarea
          style="width: 100%;"
          rows="20"
          id="response"
          disabled
        ></textarea>
      </div>
      <div class="layui-tab-item">
        <textarea
          style="width: 100%;"
          rows="20"
          id="exceptionData"
          disabled
        ></textarea>
      </div>
    </div>
  </div>
</div>

<script>
  layui.use(["admin", "laydate", "table", "assignHelper"], function(
    admin,
    table,
    laydate,
    assignHelper
  ) {
    var $ = layui.$;
    var table = layui.table;
    var laydate = layui.laydate;
    var assignHelper = assignHelper;
    reloadHistoryQueryTable = function(obj) {
      var history_query_user_nameVal =
        $("#history_query_user_name").val() || null;
      var history_query_key_wordrVal =
        $("#history_query_key_word").val() || null;
      var keywordCombineTypeFilterVal =
        $("#keywordCombineTypeFilter").val() || null;
      var history_querytime_filterVal =
        $("#history_querytime_filter").val() || null;
      var startTime = null;
      var endTime = null;
      if (history_querytime_filterVal != null) {
        startTime = history_querytime_filterVal.substr(0, 19);
        endTime = history_querytime_filterVal.substr(22, 19);
      }

      var queryData = {
        userName: history_query_user_nameVal,
        keywordCombineType: keywordCombineTypeFilterVal,
        actionKeyword: history_query_key_wordrVal,
        startTime: startTime,
        endTime: endTime
      };

      var queryTemp = {};
      Object.keys(queryData).forEach(function(val, index) {
        if (queryData[val] != null) queryTemp[val] = queryData[val];
      });
      console.log(queryTemp);

      query_history_tableIns.reload({
        url: "common/log",
        where: queryTemp
      });

      // 设置刷新后表格的查询条件
      $("#history_query_user_name").val(history_query_user_nameVal);
      $("#keywordCombineTypeFilter").val(keywordCombineTypeFilterVal);
      $("#history_query_key_word").val(history_query_key_wordrVal);
      //重新渲染
      laydate.render({
        elem: "#history_querytime_filter",
        type: "datetime",
        value: history_querytime_filterVal,
        range: true,
        trigger: "click"
      });
    };
    // 渲染表格实例
    var query_history_tableIns = table.render({
      elem: "#meter_exception_upload_table",
      toolbar: "#meter_exception_upload_table_toolbar",
      url: "common/log", //数据接口
      cols: [
        [
          {
            field: "id",
            title: "ID",
            width: 60,
            unresize: "true",
            align: "center"
          },
          {
            field: "userId",
            title: "操作人ID",
            width: 160,
            align: "center"
          },
          {
            field: "userName",
            title: "操作人",
            width: 140,
            align: "center"
          },
          {
            field: "method",
            title: "操作",
            minWidth: 140,
            align: "left"
          },
          {
            field: "url",
            title: "URI",
            minWidth: 160,
            align: "left"
          },
          {
            field: "ip",
            title: "IP地址",
            width: 150,
            align: "center"
          },
          {
            field: "successFlag",
            title: "成功标志",
            width: 80,
            align: "center",
            templet: function(d) {
              if (d.successFlag) {
                return "<span class='layui-badge layui-bg-green'>成功</span>";
              }
              return "<span class='layui-badge'>失败</span>";
            }
          },
          {
            field: "timeCast",
            title: "处理耗时",
            width: 90,
            align: "center",
            templet: function(d) {
              var prefix = "<span class='layui-badge layui-bg-";
              var endstr = " </span>";
              var text = d.timeCast + "ms";
              var color = "";
              if (d.timeCast == 0) {
                text = "异常";
              } else if (d.timeCast <= 200) {
                color = "green";
              } else if (d.timeCast <= 300) {
                color = "orange";
              }
              return prefix + color + "'>" + text + endstr;
            }
          },
          {
            field: "requestTime",
            title: "请求时间",
            width: 160,
            align: "center"
          }
        ]
      ]
    });

    // 表格内点击处理
    table.on("row(meter_exception_upload_table)", function(obj) {
      console.log(obj.data);
      assignHelper.assign(assignData(obj.data));
      layer.open({
        type: 1,
        area: "1000px",
        offset: "200px",
        shade: false,
        title: "【" + obj.data.userName + "】日志【" + obj.data.id + "】详情",
        content: $("#log_detain_window")
      });
    });

    var assignData = function(data) {
      data.timeCast = data.timeCast == 0 ? "处理异常" : data.timeCast + "ms";
      data.successFlag = data.successFlag ? "成功" : "失败";
      // 格式化返回的JSON
      var orginObj = JSON.parse(data.response);
      var orginObj2 = JSON.parse(data.requestArgs);
      data.response = JSON.stringify(orginObj, null, 4);
      data.requestArgs = JSON.stringify(orginObj2, null, 4);
      return data;
    };

    // 渲染日期时间选择器
    laydate.render({
      elem: "#history_querytime_filter",
      type: "datetime",
      range: true,
      trigger: "click"
    });
  });
</script>
